<template>
  <div class="counter-wrap">
    <div class="counter-btn counter-minus-btn" @click="minus" :disabled="disabled">
      -
    </div>
    <div class="counter-show">
      <input type="text" v-model.number="number" :readonly="readonly" :disabled="disabled"/>
    </div>
    <div class="counter-btn counter-plus-btn" @click="plus" :disabled="disabled">
      +
    </div>
  </div>
</template>
<script>
  export default{
    props: {
      counter: {
        type: Number,
        default: 20
      },
      readonly: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        number: this.counter
      };
    },
    watch: {
      number () {
        this.$emit('on-change', this.number);
      }
    },
    methods: {
      minus () {
        if (!this.disabled) {
          this.number--;
        }
      },
      plus () {
        if (!this.disabled) {
          this.number++;
        }
      }
    }
  };
</script>
<style>
  .counter-wrap{
    display: flex;
    width: 84px;
    line-height: 27px;
    text-align: center;
    border: 1px solid rgba(227, 227, 227, 1);
  }
  .counter-wrap>
  .counter-btn{
    flex-basis: 27px;
    cursor: pointer;
    user-select: none;
  }

  .counter-wrap>
  .counter-btn:hover{
    color: rgba(247, 247, 247, 1);
    background-color: rgba(79, 192, 141, 1);
  }

  .counter-wrap>
  .counter-show{
    flex: 1;
    border-left: 1px solid rgba(227, 227, 227, 1);
    border-right: 1px solid rgba(227, 227, 227, 1);
  }

  .counter-wrap>
  .counter-show>
  input{
    width: 100%;
    height: 100%;
    text-align: center;
    border-style: none;
    outline-style: none;
  }

  .counter-wrap [disabled]{
    background-color: rgba(235, 235, 228, 1);
    cursor: not-allowed;
    user-select: none;
  }

  .counter-wrap [disabled]:hover{
    background-color: rgba(235, 235, 228, 1);
    color: black;
  }

</style>

